<template>
  <view class="login-container">
    <!-- 横屏布局：左侧品牌区域 -->
    <view class="brand-section">
      <view class="brand-content">
        <view class="logo-display">
          <view class="logo-icon-large">🚛</view>
          <text class="brand-title">智慧矿山</text>
          <text class="brand-subtitle">无人运输平台</text>
          <text class="brand-description">Smart Mining Unmanned Transport Platform</text>
        </view>

        <!-- 装饰性矿山元素 -->
        <view class="mining-scene">
          <view class="mountain mountain-1"></view>
          <view class="mountain mountain-2"></view>
          <view class="mountain mountain-3"></view>
          <view class="mining-truck animated"></view>
          <view class="mining-equipment"></view>
          <view class="mining-path"></view>
        </view>

        <view class="feature-highlights">
          <view class="feature-item">
            <text class="feature-icon">🤖</text>
            <text class="feature-text">智能调度</text>
          </view>
          <view class="feature-item">
            <text class="feature-icon">📊</text>
            <text class="feature-text">实时监控</text>
          </view>
          <view class="feature-item">
            <text class="feature-icon">🛡️</text>
            <text class="feature-text">安全保障</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 横屏布局：右侧登录表单区域 -->
    <view class="form-section">
      <view class="login-form">
        <view class="form-header">
          <text class="welcome-text">欢迎登录</text>
          <text class="welcome-subtitle">请输入您的账户信息</text>
        </view>

        <wd-form ref="formRef" :model="loginForm">
          <wd-cell-group>
            <wd-input
              label="用户名"
              label-width="120rpx"
              prop="username"
              clearable
              v-model="loginForm.username"
              placeholder="请输入用户名"/>
            <wd-input
              label="密码"
              label-width="120rpx"
              prop="password"
              show-password
              clearable
              v-model="loginForm.password"
              placeholder="请输入密码"/>
          </wd-cell-group>

          <view class="login-options">
            <!-- <wd-checkbox v-model="rememberMe" custom-class="remember-checkbox">
              记住密码
            </wd-checkbox> -->
            <view style="flex:1"></view>
            <text class="forgot-password" @click="handleForgotPassword">忘记密码？</text>
          </view>

          <wd-button
            type="primary"
            size="large"
            custom-class="login-button"
            :loading="loading"
            @click="handleLogin">登录</wd-button>
        </wd-form>

        <view class="copyright-text">
		      <text>西安主函数智能科技有限公司</text>
        </view>
        <!-- <view class="other-login">
          <view class="divider">
            <text class="divider-text">其他登录方式</text>
          </view>
          <view class="social-login">
            <view class="social-item" @click="handleWechatLogin">
              <view class="social-icon wechat-icon">💬</view>
              <text class="social-text">微信登录</text>
            </view>
            <view class="social-item" @click="handlePhoneLogin">
              <view class="social-icon phone-icon">📱</view>
              <text class="social-text">手机登录</text>
            </view>
          </view>
        </view> -->
      </view>
      <text class="server-address">{{ serverIp }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useUserStore } from "@/store";

const userStore = useUserStore();

// 表单引用
const formRef = ref();
const serverIp = import.meta.env.VITE_APP_API_URL;

// 登录表单数据
const loginForm = reactive({
  username: "",
  password: "",
});

// 其他状态
const loading = ref(false);
const rememberMe = ref(false);

// 登录处理
const handleLogin = () => {
  try {
    // 表单验证
    if (!loginForm.username || !loginForm.password) {
        uni.showToast({
          title: "账号密码为空",
          icon: "error",
        });
        return;
    }

    loading.value = true;

    // 调用登录接口
    userStore.login({
      username: loginForm.username,
      password: loginForm.password,
    }).then(res => {
      if (!res.success) {
        uni.showToast({
          title: res.message || "登录失败",
          icon: "none",
        });
        return;
      }
      uni.showToast({
        title: "登录成功",
        icon: "success",
      });

      // 登录成功后跳转
      uni.redirectTo({ url: '/pages/dashboard/index' });
    });
  } finally {
    loading.value = false;
  }
};

// 忘记密码
const handleForgotPassword = () => {
  uni.showToast({
    title: "请联系管理员重置密码",
    icon: "none",
  });
};

onMounted(() => {
  // 如果已经登录，直接跳转到首页
  if (userStore.isLoggedIn) {
    uni.redirectTo({ url: '/pages/dashboard/index' });
  }
});
</script>

<style lang="scss" scoped>
@import "@/style/login.scss";
</style>
